<template>
	<div id="chatroom">
		<div class="position-intro">
			<a href="javascript:;">
				<span v-for="(item,index) in positionData" :key="index" :class="item.name=='pcontent'?'active':''">{{item.title}}</span>
			</a>
		</div>
		<div class="chat-content">
			<div class="hr-content">
				<img src="../../static/img/hr2.jpg" alt="" />
				<span>可以的，方便发一份简历吗？</span>
			</div>
		</div>
		<!--发送信息-->
		<div class="send-msg">
			<div class="fast-quit">
				<i class="iconfont icon-xiaolian"></i>
				<i class="iconfont icon-huaban"></i>
				<i class="iconfont icon-fajianli"></i>
				<i class="iconfont icon-shouji"></i>
				<i class="iconfont icon-45-weixin-xiaoxi"></i>
			</div>
			<textarea></textarea>
			<div class="send-btn">
				<label>按Enter键发送，按Ctrl+Enter健换行</label>
				<span class="sendbtn">发送</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				positionData: ['沟通职位', 'web前端工程师', '5-7k·13薪', '成都'],
				positionData: [{
						'name': 'pname',
						'title': '沟通职位'
					},
					{
						'name': 'pcontent',
						'title': 'web前端工程师'
					},
					{
						'name': 'salary',
						'title': '5-7k·13薪'
					},
					{
						'name': 'place',
						'title': '成都'
					}
				],
				//senddata:["icon-xiaolian",""]
			}
		}
	}
</script>

<style scoped>
	.el-main {
		position: relative;
	}
	
	.position-intro {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fafafa;
		text-align: left;
		line-height: 40px;
		padding-left: 50px;
		box-sizing: border-box;
	}
	
	.position-intro span {
		font-size: 14px;
		color: #999;
		margin-right: 10px;
	}
	
	.position-intro span.active {
		color: #00BFCC;
	}
	/*对话内容*/
	
	.hr-content {
		position: absolute;
		top: 100px;
		left: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.hr-content img {
		width: 50px;
		border-radius: 50%;
	}
	
	.hr-content span {
		background-color: #f1f1f1;
		display: inline-block;
		padding: 10px 20px;
		margin-left: 10px;
		border-radius: 5px;
		font-size: 14px;
		color: #333;
	}
	/*信息发送*/
	.send-msg {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 150px;
		width: 100%;
		border-top: 1px solid #F1F1F1;
	}
	.fast-quit{
		position: absolute;
		left: 50px;
		top: 10px;

		/*display: flex;*/
		/*justify-content:flex-end;*/
		/*align-items: flex-end;*/

	}
	.send-msg i {
		display: inline-block;
		position: relative;
		cursor: pointer;
		font-size: 28px;
		margin-right: 15px;
		color: #999;
	}
	.send-msg i:nth-child(2){
		font-size: 32px;
		position: relative;
		top: 2px;
	}
	.send-msg i:nth-child(3),
	.send-msg i:nth-child(4){
		font-size: 26px;
	}
	.send-msg i:after {
		content: "";
		display: block;
		position: absolute;
		width: 50px;
		height: 30px;
		/*border: 1px solid red;*/
		top: -40px;
		left: -15px;
	}
	
	/*发送按钮*/
	.send-btn{
		position: absolute;
		bottom: 20px;
		right: 30px;
	}
	.send-btn label{
		font-size: 14px;
		color: #999;
	}
	.sendbtn{
		padding: 2px 10px;
		border: 1px solid #999;
		border-radius: 15px;
		color: #999;
		font-size: 14px;
		cursor: pointer;
	}
	.sendbtn:hover{
		color: #fff;
		background-color: #00BFFF;
	}

	.send-msg textarea{
		width: 100%;
		height: 50px;
		box-sizing: border-box;
		border: none;
		outline: none;
		position: absolute;
		top: 50px;
		left: 0;
	}
</style>